<template>
    <div class="team-client-item">
      <div class="bg-white">
        <div class="client-desc" @click.stop.prevent="clickItem(client)">
          <span class="img-wrapper"><img data-object-fit="cover" :src="client.head_img_url" /></span>
          <span class="social-name">{{ client.name }}</span>
          <span class="team-name grey">{{ client.team_name }}</span>
          <span class="team-name grey">点击分配</span>
        </div>
        <!-- <div class="label-list">
          <label v-for="(label, index) in client.labels " :key="index" class="label-item">
            <router-link :to="label.link">{{ label.name }}</router-link>
          </label>
        </div> -->
      </div>
    </div>
</template>

<script>
  export default{
    props:{
      client: {
        type : Object,
        require: true
      },
      isBack: {
        type : Object,
      }
    },
    data () {
      return {

      };
    },
    methods:{
      clickItem(member){
        this.$emit('on-click', member);
      }
    },

    components:{

    }
  }
</script>

<style lang="less">
  @import '../less/index.less';

  .team-client-item {
    background-color: white;
    padding: 15px 0 1px 0;
    padding-left: 10px;

    .bg-white{
      padding-bottom: 15px;
      border-bottom: 1px solid #e0dcdc;

    }

    .client-desc {
       display: block;

       &>*{
       vertical-align: middle;
       }
    }

    .img-wrapper {

      width: 3em;
      height: 3em;
      display: inline-block;

      img {
        border-radius: 3em;
        border: 1px solid #eee;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }

    a,a:hover,a:visited,a:focus{
      color:#323333;
    }

    .social-name{
      display: inline-block;
      margin-left: 10px;
    }

    .property-items{
      margin:5px 0 10px;

      a{
        display: inline-block;
        padding-right: 12px;
        line-height: 15px;
        height: 15px;
      }

      a:not(:first-child) {
        padding-left: 12px;
      }

      a:not(:last-child) {
        border-right: 1px solid #B2B2B2;
      }
    }

    .label-list{

      &:extend(.clearfix all);

      label{
        float: left;
      }

      a {
        padding: 2px 8px;
        display: block;
        color: white;
        font-size: 12px;
        border-radius: 6px;
        margin-right: 10px;
        background-color: #35ADFF;
      }
    }

    .team-name{
      margin-left: 2rem;
      font-size: 12px;
      color: grey;
    }

  }
</style>
